<template>
	<view class="page">
		<active-navigation></active-navigation>
		<scroll-view class="scroll-Y" :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
			<view class="search-button-block" :style="{'margin-top':height+100+'px'}">
				<button class="search-button"><label class="iconfont iconsousuo"></label>搜索</button>
			</view>
			<view class="friend-active">
				<view class="friend-active-left">
					<label class="iconfont icontubiaozhizuomoban-"></label>
					<text>好友动态</text>
				</view>
				<view class="friend-active-right">
					<text class="active-number">17人新发表</text>
					<image class="active-img active-img1" src="../../static/headPic.jpg"></image>
					<image class="active-img active-img2" src="../../static/headPic.jpg"></image>
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			
			<view class="new-active">
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ff0000;"
						class="active-icon iconfont iconbiaoqiankuozhan_fujin-282"></label>
						<text>附近</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ffff53;"
						class="active-icon iconfont iconshu"></label>
						<text>自习室</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #83ffa6;"
						class="active-icon iconfont iconzhibo"></label>
						<text>直播</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				
			</view>
			
			
			<view class="new-active">
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #55aaff;"
						class="active-icon iconfont icongame"></label>
						<text>游戏中心</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ff659b;"
						class="active-icon iconfont iconyuedu"></label>
						<text>动漫</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #b592ff;"
						class="active-icon iconfont iconyuedu"></label>
						<text>阅读</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ff385c;"
						class="active-icon iconfont iconxiaoyouxi"></label>
						<text>小游戏</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ffff00;"
						class="active-icon iconfont icongouwu"></label>
						<text>购物</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #f458ff;"
						class="active-icon iconfont iconweishipin"></label>
						<text>微视</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ff7096;"
						class="active-icon iconfont iconKge"></label>
						<text>全民K歌</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #55ff00;"
						class="active-icon iconfont iconyinlemusic215"></label>
						<text>音乐</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #fff454;"
						class="active-icon iconfont iconcanjiaxiaowaijingsai"></label>
						<text>企鹅电竞</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #00ff00;"
						class="active-icon iconfont icontianchongxing-"></label>
						<text>腾讯看点</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #1ea9ff;"
						class="active-icon iconfont iconic_list_a"></label>
						<text>应用宝</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #fcff1e;"
						class="active-icon iconfont iconjushou"></label>
						<text>坦白说</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #0bb6ff;"
						class="active-icon iconfont iconziyuan"></label>
						<text>运动</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
			</view>
			
			<view class="new-active">
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ffff1d;"
						class="active-icon iconfont iconwanju"></label>
						<text>吃喝玩乐</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #ff2238;"
						class="active-icon iconfont iconfuwu"></label>
						<text>同城服务</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
				<view class="active-list">
					<view class="active-list-left">
						<label 
						style="color: #0bb6ff;"
						class="active-icon iconfont iconmyicon-"></label>
						<text>扩列</text>
					</view>
					<view class="active-list-right">
						<label class="iconfont icon113fangxiang_xiangyou"></label>
					</view>
				</view>
				
			</view>
			
			
		</scroll-view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				height:null,//获取的状态栏高度
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		},
		onInit(){
			var _this=this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success:function(data){
					// 将其赋值给this
					_this.height=data.statusBarHeight;
				}
			})
		},
	}
</script>

<style>
	@import url("dynamic.css");
</style>
